import React, { Component } from 'react'
import {
  View, Text, StyleSheet,
  ScrollView,FlatList
} from 'react-native'
import NavBar from 'src/components/navBar'
import navigationhelper from 'src/components/navigationhelper'
import {deviceWidth,isIPhoneX} from "../../../util"

export default class MakePlanPreviewList extends Component {

    constructor (props) {
      super(props)

      const detail = this.props.navigation.getParam('detail')
      this.state={
        detail:detail
      }
      console.log('====>>>',this.state.detail)

    }

    SeparatorView(){
      return(<View style={{height:0.5, width:deviceWidth, backgroundColor:'#E6E3E6'}}/>)
  }

    render () {
        return (
            <View>
            <NavBar 
            back={()=>{navigationhelper.goBack() }} 
            title={'计划预览'} 
            leftText={'返回'} 
            barStyle={'dark-content'}
            />

            <ScrollView>
            <FlatList
          style={{marginTop:15}}
          data={this.state.detail}
          ItemSeparatorComponent={this.SeparatorView}
          renderItem={({item}) =>
          {
            let showTitle = (item.type == 1?<Text style={styles.consumeText}>待消费</Text>:<Text style={styles.repaymentText}>待还款</Text>)
            return(
              <View style={styles.item}>
              <View style={{flexDirection:'column',marginLeft:20}}>
              <Text style={{fontSize:14,marginTop:6}}>{showTitle}</Text>
               <Text style={{color:'#378EFB',fontSize:14,marginTop:10}}>{'¥'+item.amount}</Text>
              </View>
              <Text style={{fontSize:11,right:20,color:'#8E8E93',position:'absolute'}}>{item.run_time}</Text>
            
              </View>
             )
          }
          }/>

          <View style={{height:isIPhoneX?88:64}}>

          </View>

            </ScrollView>
        

            </View>

        )
     }

}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    backgroundColor:'white',
    // padding: 10,
    fontSize: 18,
    height:60,
    flexDirection:'row',
    alignItems: 'center',
    // justifyContent:'space-between',
  },
  consumeText:{
    color: '#FF8E89'
  },
  repaymentText:{
    color:'#76D358'
  }
})